
import React, { Component } from 'react';
import { TabBarIOS } from 'react-native';
import { FirstTabBarItem, SecondTabBarItem, ThirdTabBarItem, FourthTabBarItem } from '../component/tabBarComponent/index';

//feed_tab_ico_4_normal
//feed_tab_ico_4_enabled
//feed_tab_ico_3_normal
//feed_tab_ico_3_enabled
//feed_tab_ico_2_normal
//feed_tab_ico_2_enabled
//feed_tab_ico_1_normal
//feed_tab_ico_1_enabled

class Main extends Component {

    constructor(props){
        super(props);
        this.state = {
            selectedTab: 'redTab',
            notifyCount: 0,
            presses: 0
        };
    }

    render() {
        return (
            <TabBarIOS
                unselectedTintColor="yellow"
                tintColor="blue"
                barTintColor="darkslateblue">
                <TabBarIOS.Item
                    title="first"
                    icon={{uri:'feed_tab_ico_1_normal', scale: 3}}
                    selectedIcon={{uri:'feed_tab_ico_1_enabled', scale: 3}}
                    selected={this.state.selectedTab === 'redTab'}
                    renderAsOriginal
                    onPress={() => {
                        this.setState({
                            selectedTab: 'redTab'
                            });
                    }
                }>
                    <FirstTabBarItem/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="second"
                    icon={{uri:'feed_tab_ico_2_normal', scale: 3}}
                    selectedIcon={{uri:'feed_tab_ico_2_enabled', scale: 3}}
                    badge={this.state.notifyCount > 0 ? this.state.notifyCount : undefined}
                    selected={this.state.selectedTab === 'blueTab'}
                    renderAsOriginal // 设置渲染模式
                    onPress={() => {
                        this.setState({
                            selectedTab: 'blueTab',
                            notifyCount: this.state.notifyCount + 1
                        });
                    }
                }>
                    <SecondTabBarItem/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="third"
                    icon={{uri:'feed_tab_ico_3_normal', scale: 3}}
                    selectedIcon={{uri:'feed_tab_ico_3_enabled', scale: 3}}
                    renderAsOriginal
                    selected={this.state.selectedTab === 'greenTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'greenTab',
                            presses: this.state.presses + 1
                        });
                    }
                }>
                    <ThirdTabBarItem/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="fourth"
                    icon={{uri:'feed_tab_ico_4_normal', scale: 3}}
                    selectedIcon={{uri:'feed_tab_ico_4_enabled', scale: 3}}
                    renderAsOriginal
                    selected={this.state.selectedTab === 'yellowTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'yellowTab',
                            presses: this.state.presses + 1
                        });
                    }
                }>
                    <FourthTabBarItem/>
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
}

export default Main;